<template>
	<view class="content">
		<!-- 身份证上传 -->
		<view class="box-ID">
			<view class="ID-title">身份证上传</view>

			<view class="ID-item">
				<view @click="chooseImg(1)">
					<image v-if="Form.idcardImg===''" class="ID-img" src="/static/img/img1.png" mode="widthFix" />
					<image v-else class="ID-img" :src="Form.idcardImg" mode="aspectFill" />
					<view class="ID-txt">上传身份证正面</view>
				</view>

				<view @click="chooseImg(2)">
					<image v-if="Form.idcardBackImg===''" class="ID-img" src="/static/img/img2.png" mode="widthFix" />
					<image v-else class="ID-img" :src="Form.idcardBackImg" mode="aspectFill"></image>
					<view class="ID-txt">上传身份证反面</view>
				</view>

			</view>
		</view>

		<!-- 行驶证上传 -->
		<view class="box-ID">
			<view class="ID-title">行驶证上传</view>
			<view class="ID-item2">

				<view @click="chooseImg(3)">
					<view class="ID-car" v-if="Form.drivingLicenseImg===''">
						<!--		            <uni-icons type="plusempty" size="40" color="#CFCFCF"></uni-icons>-->
						<!--		            <view class="ID-txt">正本</view>-->
						<image class="ID-carImg" src="/static/img/upload1.png" mode="widthFix"></image>
					</view>
					<image v-else class="ID-carImg" :src="Form.drivingLicenseImg" mode="widthFix" />
				</view>

				<view @click="chooseImg(4)">
					<view class="ID-car" v-if="Form.drivingLicenseBackImg===''">
					<!-- 	<uni-icons type="plusempty" size="40" color="#CFCFCF"></uni-icons>
						<view class="ID-txt">副本</view> -->
						<image class="ID-carImg" src="/static/img/upload2.png" mode="widthFix"></image>
					</view>
					<image v-else class="ID-carImg" :src="Form.drivingLicenseBackImg" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 留言-->
		<!--		    <view class="box-ID">-->
		<!--		      <view class="ID-title">留言</view>-->
		<!--		      <view class="ID-item">-->
		<!--		        <u&#45;&#45;textarea v-model="Form.etcCancelLeaveWords" placeholder="请输入留言内容" autoHeight border='none'></u&#45;&#45;textarea>-->
		<!--		      </view>-->
		<!--		    </view>-->

		<view class="etc-txt">
			友谊提示:本平台信息仅用于用户办理ETC注销业务使用，不得上传虚假资料。
		</view>

		<!-- 提交信息 -->
		<view class="btn">
			<button class="btn-submit" @tap="$u.throttle(submit, 2000)">提交信息</button>
		</view>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';


	import { checkLogin, getRoles } from "../../api/common/login";
	import { UploadImg } from "../../utils/upload";
	import { navigateBack, navigateTo, redirectTo } from "../../utils/nav";
	import { showNoneMsg } from "../../utils/showMsg";
	import { ETCCancelFillIn } from "../../api/order/order";


	export default Vue.extend({
		data() {
			return {
				orderId: '',
				Form: {
					idcardImg: '',  //身份证正面
					idcardBackImg: '', //身份证背面
					drivingLicenseImg: '', //行驶证正面
					drivingLicenseBackImg: '', //行驶证副面
					// etcCancelLeaveWords: '',//留言内容
				},
			}
		},
		onLoad(options) {
			console.log(options, '获取到的值');
			this.orderId = options.id || '';
		},
		async onShow() {
			await checkLogin()
			const roles = await getRoles()
			if (roles.indexOf('role:login_app') === -1) {
				navigateTo('/pages/common/nick_avatar')
			}

		},
		methods: {
			// 上传图片
			chooseImg(type : any) {
				UploadImg((res) => {
					if (type == 1) {
						this.Form.idcardImg = res;
					} else if (type == 2) {
						this.Form.idcardBackImg = res;
					} else if (type == 3) {
						this.Form.drivingLicenseImg = res;
					} else if (type == 4) {
						this.Form.drivingLicenseBackImg = res;
					}
				}, 1)
			},



			// 提交
			submit() {
				if (this.Form.idcardImg.length == 0) {
					showNoneMsg('请上传身份证正面')
					return;
				}
				if (this.Form.idcardBackImg.length == 0) {
					showNoneMsg('请上传身份证背面')
					return;
				}
				if (this.Form.drivingLicenseImg.length == 0) {
					showNoneMsg('请上传行驶证正本')
					return;
				}
				if (this.Form.drivingLicenseBackImg.length == 0) {
					showNoneMsg('请上传行驶证副本')
					return;
				}

				let that = this;

				that.submitForm()
			},

			// 提交信息
			async submitForm() {
				const { code, data, msg } = await ETCCancelFillIn(this.orderId, this.Form)
				if (code === 'A000') {
					// showNoneMsg('提交成功')
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 800
					})
					// setTimeout()
					// uni.redirectTo({
					//   url: '/pages/index/success?type=1'
					// })
					redirectTo('/pages/index/success?type=3', 800)
				} else {
					showNoneMsg('提交失败')
				}
			},

		}
	})
</script>

<style scoped>
	.content {
		padding-bottom: 185rpx;
		font-family: Microsoft YaHei UI;
	}

	/* 2. 申办人信息 */
	/* 身份证上传 */
	.box-ID {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 26rpx 20rpx;
		padding: 33rpx 32rpx;
	}

	.ID-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}

	.ID-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 37rpx;
	}
    .ID-item2{
		margin-top: 37rpx;
	}
	.ID-img {
		width: 310rpx;
		height: 192rpx;
		border-radius: 10rpx;
	}

	.ID-car {
		width: 600rpx;
		height: 360rpx;
		border-radius: 10rpx;
		/* border: 2rpx solid #CFCFCF; */
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin: 0 auto 10rpx;
		/* border: 2rpx solid deeppink; */
	}
    .ID-carImg{
		width: 600rpx;
		height: 360rpx;
		display: block;
		margin: 0 auto 10rpx;
	}
	.ID-txt {
		width: 310rpx;
		text-align: center;
		color: #818181;
		font-size: 28rpx;
	}

	/* 友情提示 */
	.etc-txt {
		width: 650rpx;
		margin: auto;
		/*text-align: center;*/
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 40rpx;
		color: #A9A9A9;
		padding-top: 25rpx;
		padding-bottom: 74rpx;
	}

	/* 提交信息 */
	.btn {
		width: 100%;
		/* padding: 0 27rpx; */
		padding-top: 25rpx;
		padding-bottom: 41rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.btn-check {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		padding-left: 58rpx;
		padding-bottom: 23rpx;
		color: #818181;
	}

	.btn-check-txt {
		color: #45CBA6;
	}

	.btn-submit {
		width: 654rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #1A6FFD;
		border-radius: 50rpx;
		font-size: 35rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
